<template>
  <div class="full-height tab-charts">
    <Card
      :bordered="false"
      class="full-height tab-card"
      :tab-list="tabList"
      :active-tab-key="activeKey"
      @tabChange="key => activeKey = key"
    >
      <!-- <div class="card-container"> -->
      <ScenceDetail class="full-height" :tabInfo="tabInfo" :key="activeKey" />
      <!-- </div> -->
    </Card>
  </div>
</template>
  <script lang="ts">
import { getScenceLatencyApi, getScenceThroughputApi } from "@/api/scence";
import { Tabs, TabPane, Card } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import ScenceDetail from "./ScenceDetail.vue";
import _ from "lodash";
import { tabList } from "./dataJson";
export default defineComponent({
  components: {
    Card,
    Tabs,
    TabPane,
    ScenceDetail,
  },
  setup() {
    const activeKey = ref(tabList[0].key);
    return {
      activeKey,
      tabList,
    };
  },
  computed: {
    tabInfo() {
      return _.find(this.tabList, { key: this.activeKey });
    },
  },
  methods: {
  },
});
</script>
  <style lang="less" scoped>
.tab-charts {
  padding-bottom: 10px;
}
.tab-card {
  // display: flex;
  // flex-direction: column;
}
:deep(.ant-card-body) {
  height: 100%;
  padding: 15px;
}
</style>